<template>
  <div>
    <el-row :gutter="20" class="boxleft">
      <el-col :span="12">
        <div class="left">
          <div class="header">运营人员（当天）</div>
          <div class="body">
            <div class="stats">
              <div class="item">
                <div class="num">{{ operate.total }}</div>
                <div class="title">工单总数（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num">{{ operate.completedTotal }}</div>
                <div class="title">完成工单（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num">{{ operate.cancelTotal }}</div>
                <div class="title">拒绝工单（个））</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num">{{ operate.workerCount }}</div>
                <div class="title">运营人员数（个））</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="right">
          <div class="header">运维人员（当天）</div>
          <div class="body">
            <div class="stats">
              <div class="item">
                <div class="num colorred">{{ operations.total }}</div>
                <div class="title color">工单总数（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num colorred">{{ operations.completedTotal }}</div>
                <div class="title color">完成工单（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num colorred">{{ operations.cancelTotal }}</div>
                <div class="title color">拒绝工单（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item">
                <div class="num colorred">{{ operations.workerCount }}</div>
                <div class="title color">运维人员数（个）</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <div class="header">
            <div class="title">工单状态</div>
            <div class="block">
              <el-date-picker
                v-model="value1"
                size="small"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              />
            </div>
            <div class="select" style="margin-left: 5px">
              <div
                class="item"
                :class="{ active: select === 'week' }"
                style="margin-left: 5px"
                @click="week"
              >
                周
              </div>
              <div
                class="item"
                :class="{ active: select === 'month' }"
                @click="month"
              >
                月
              </div>
              <div
                class="item"
                :class="{ active: select === 'year' }"
                @click="year"
              >
                年
              </div>
            </div>
          </div>
          <div v-if="chartsList.length === 0" class="image">
            <img src="./img/无数据.png" alt="">
            <div>暂无数据</div>
          </div>

          <div v-else class="chart">
            <div ref="chart" style="width: 100%; height: 100%" />
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="rankTitle">
            <div>人效排名（月度）</div>
            <div>
              <el-select
                v-model="region"
                placeholder="请选择"
                size="small"
                style="width: 100px"
              >
                <el-option label="全部" value="null" />
                <el-option
                  v-for="item in regionlist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
          <div class="rankselect">
            <div class="box">
              <div
                :class="{ active: selsctuser === 'yunying' }"
                @click="yunying"
              >
                运营人员
              </div>
              <div :class="{ active: selsctuser === 'yunwei' }" @click="yunwei">
                运维人员
              </div>
            </div>
          </div>
          <div class="rankBody">
            <div v-if="userWorkTop10.length !== 0" class="Top" />
            <div v-else class="image">
              <img src="./img/无数据.png" alt="">
              <div>暂无数据</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import getDateFn from '@/views/Personnel/utils/time'
import { taskReportInfo, regionList, chartsInfo } from '@/api/renyuan'
export default {
  name: 'Renxaio',
  data() {
    return {
      select: 'week',
      selsctuser: 'yunying',
      value1: [getDateFn.getMonday('s', 0), getDateFn.getDate(0)],
      region: '全部',
      operate: {},
      operations: {},
      regionlist: [],
      userWorkTop10: [],
      chartsList: [],
      chartsXarr: [],
      cencelarr: [],
      finnsharr: []
    }
  },
  watch: {
    value1: {
      deep: true,
      async handler(newval) {
        const a = await this.chartsInfo(newval[0], newval[1])
        if (a.length > 0) {
          this.chartsList = a
          this.chartsXarr = this.chartsList.map(item => item.collectDate)
          this.cencelarr = this.chartsList.map(item => item.cancelCount)
          this.finnsharr = this.chartsList.map(item => item.finishCount)
          this.$nextTick(() => {
            this.initChart()
          })
        } else {
          this.chartsList = []
        }
      }
    }
  },
  mounted() {
    this.value1 = [getDateFn.getMonday('s', 0), getDateFn.getDate(0)]
  },
  async created() {
    const a = await this.getDayInfo()
    const b = await regionList({ pageIndex: 1, pageSize: 100000 })
    this.operate = a[0]
    this.operations = a[1]
    this.regionlist = b.currentPageRecords
    this.initChart()
  },
  methods: {
    week() {
      this.select = 'week'
      this.value1 = [getDateFn.getMonday('s', 0), getDateFn.getDate(0)]
    },
    month() {
      this.select = 'month'
      this.value1 = [getDateFn.getMonth('s', 0), getDateFn.getDate(0)]
    },
    year() {
      this.select = 'year'
      this.value1 = [getDateFn.getYear('s', 0), getDateFn.getDate(0)]
    },
    yunying() {
      this.selsctuser = 'yunying'
    },
    yunwei() {
      this.selsctuser = 'yunwei'
    },
    // 当日信息
    getDayInfo() {
      return taskReportInfo({
        start: getDateFn.getDate(0) + ' 00:00:00',
        end: getDateFn.getDate(0) + ' 23:59:59'
      })
    },
    // 折线图数据
    chartsInfo(start, end) {
      return chartsInfo({
        start,
        end
      })
    },
    // 折线图
    initChart() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = echarts.init(chart)
        const options = {
          legend: {
            y: 'bottom',
            padding: 10,
            tooltip: {
              show: true
            },
            icon: 'rect',
            itemHeight: 20,
            itemWidth: 40,
            data: ['完成工单', '取消工单']
          },
          xAxis: {
            type: 'category',
            data: this.chartsXarr
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '完成工单',
              data: this.finnsharr,
              type: 'line',
              itemStyle: {
                normal: { color: 'blue' },
                lineStyle: { color: 'blue' }
              }
            },
            {
              name: '取消工单',
              data: this.cencelarr,
              type: 'line',
              itemStyle: {
                normal: { color: 'red' },
                lineStyle: { color: 'red' }
              }
            }
          ]
        }
        myChart.setOption(options)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boxleft {
  .el-col {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
    .left {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
        Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
        sans-serif;
      box-sizing: border-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      height: calc(25vh - 30px);
      min-height: 166px;
      background: #e9f3ff;
      background-image: url('./img/left-1.png'), url('./img/left-2.png');
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, calc(100% - 12px) 100%;
      padding: 20px;
      border-radius: 20px;
    }
    .right {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
        Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
        sans-serif;
      box-sizing: border-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      height: calc(25vh - 30px);
      min-height: 166px;
      background: #fbefe8 url('./img/right-1.png') no-repeat calc(100% - 12px)
        100%;
      padding: 20px;
      border-radius: 20px;
    }
    .body {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
        Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
        sans-serif;
      -webkit-box-direction: normal;
      box-sizing: border-box;
      -webkit-box-flex: 1;
      flex: 1;
      display: flex;
      .stats {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
          Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
          sans-serif;
        -webkit-box-direction: normal;
        box-sizing: border-box;
        -webkit-box-flex: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        .item {
          line-height: 1.15;
          -webkit-text-size-adjust: 100%;
          -webkit-font-smoothing: antialiased;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
            Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
            Microsoft YaHei, Arial, sans-serif;
          box-sizing: border-box;
          display: inline-flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          flex-direction: column;
          .num {
            -webkit-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            -webkit-box-direction: normal;
            box-sizing: border-box;
            height: 50px;
            font-size: 36px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            line-height: 50px;
            color: #072074;
            text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
          }
          .title {
            -webkit-text-size-adjust: 100%;
            -webkit-font-smoothing: antialiased;
            -webkit-box-direction: normal;
            box-sizing: border-box;
            height: 17px;
            margin-top: 3px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 17px;
            color: #91a7dc;
          }
        }
      }
    }
  }
}
.colorred {
  color: #ff5757 !important;
  text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5) !important;
}
.color {
  color: #de9690 !important;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.bg-purple {
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(75vh - 90px);
  min-height: 542px;
  background: #fff;
}
.grid-content {
  border-radius: 20px;
  min-height: 36px;
  .header {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
      Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
      sans-serif;
    -webkit-box-direction: normal;
    box-sizing: border-box;
    display: flex;
    .title {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -webkit-box-direction: normal;
      box-sizing: border-box;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-flex: 1;
      flex: 1;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333;
    }
    .block .el-date-picker {
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
        Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
        sans-serif;
      -webkit-box-direction: normal;
      position: relative;
      text-align: left;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #d8dde3;
      box-sizing: border-box;
      color: #606266;
      font-size: inherit;
      line-height: 40px;
      outline: none;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      display: inline-flex;
      -webkit-box-align: center;
      align-items: center;
      padding: 3px 10px;
      height: 32px;
      width: 230px;
      margin-right: 21px;
    }
    .select {
      line-height: 1.15;
      box-sizing: border-box;
      background: rgba(233, 243, 255, 0.37);
      border-radius: 10px;
      display: flex;

      justify-content: center;

      align-items: center;
      .item {
        line-height: 1.15;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
          Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
          sans-serif;
        -webkit-box-direction: normal;
        box-sizing: border-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        width: 37px;
        height: 25px;
        font-size: 14px;
        color: #9ca3b4;
        cursor: pointer;
      }
    }
  }

  .chart {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
      Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
      sans-serif;
    -webkit-box-direction: normal;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
  }
  .image {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    div {
      text-align: center;
    }
  }
  .rankTitle {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
      Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
      sans-serif;
    -webkit-box-direction: normal;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
  }
  .rankselect {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
      Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
      sans-serif;
    -webkit-box-direction: normal;
    box-sizing: border-box;
    width: 177px;
    margin: 15px auto 0;
    .box {
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
        Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
        sans-serif;
      -webkit-box-direction: normal;
      box-sizing: border-box;
      height: 34px;
      background: rgba(233, 243, 255, 0.37);
      border-radius: 10px;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      div {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
          Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
          sans-serif;
        -webkit-box-direction: normal;
        box-sizing: border-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        width: 78px;
        height: 25px;
        font-size: 14px;
        color: #9ca3b4;
        cursor: pointer;
      }
    }
  }
  .rankBody {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
      Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
      sans-serif;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    flex: 1;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    .image {
      div {
        text-align: center;
      }
    }
  }
}
.active {
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
  border-radius: 7px;
  font-weight: 600;
  color: #333;
}
</style>
